<template>
  <div style="width: 100%;height: 500px;padding-top:0;margin: 0 ">
    <div class="pageheader">
      <div class="pageheader-1">
        <i class="el-icon-user-solid"></i><label>角色管理</label>
      </div>
      <div style="height: 100%;position: absolute;top: 20px;left: 350px">
        <el-form :model="input" ref="key">
        <el-input
          style="width: 200px;position: absolute;top: 5px;left: 0px"
          size="small"
          placeholder="搜索"
          suffix-icon="el-icon-search"
          maxlength="20"
          v-model="input.input3">
        </el-input>
        <el-button type="primary" @click="find('key')" class="searchbtn" plain>查询</el-button>
        </el-form>
        <el-button type="primary" v-show="list[0].children[1].showadd" @click="openadd=true" class="add">添加</el-button>
      </div>

    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%;height: 80%">

      <el-table-column
        prop="roleid"
        label="编号">
      </el-table-column>
      <el-table-column
        prop="rolename"
        label="名称">
      </el-table-column>
      <el-table-column
        label="权限">
        开启
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作">
        <template  slot-scope="scope">
          <el-button type="primary" v-show="list[0].children[1].showedit" @click="edit(scope.row)" >修改</el-button>
          <el-button type="danger" v-show="list[0].children[1].showdelete" @click="opendelete(scope.row)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        page-size="5"
        :total="total"
        @current-change="page">
      </el-pagination>
    </div>
    <!--添加-->
    <el-dialog title="添加" @close="this.reload" :visible.sync="openadd">
      <el-form :rules="rules" :model="roleform" ref="addAction">
        <el-form-item prop="roleid" label="角色编号" :label-width="formLabelWidth">
          <el-input v-model="roleform.roleid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="rolename" label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="roleform.rolename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="menu" label="权限菜单" :label-width="formLabelWidth">
          <el-checkbox-group :key="item" v-for=" item in menu" v-model="Menu">
            <el-checkbox :label="item.menuname" ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="this.reload">取 消</el-button>
        <el-button type="primary" @click="add ('addAction')">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改-->
    <el-dialog title="修改" @close="this.reload" :visible.sync="openedit">
      <el-form :rules="rules" :model="roleform" ref="editAction">
        <el-form-item prop="roleid" label="角色编号" :label-width="formLabelWidth">
          <el-input :disabled="true" v-model="roleform.roleid" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="rolename" label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="roleform.rolename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="menu" label="权限菜单" :label-width="formLabelWidth">
          <el-checkbox-group :key="item" v-for=" item in menu" v-model="Menu">
            <el-checkbox :label="item.menuname" ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="this.reload">取 消</el-button>
        <el-button type="primary" @click="editaction ('editAction')">确 定</el-button>
      </div>
    </el-dialog>
    <!--提示 -->
    <el-dialog
      title="提示"
      :visible.sync="openelete"
      width="30%"
      center>
      <span>你确定要删除该条记录吗?</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="openelete = false">取 消</el-button>
    <el-button type="primary" @click="deleted" >确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  inject: ['reload', 'list'],
  methods: {
    // 查询功能
    find (key) {
      const _this = this
      if (this.input.input3 !== '') {
        axios.get('http://localhost:8088/findByRoleidF/' + this.input.input3).then(function (resp) {
          _this.tableData = resp.data
          _this.total = 1
        })
      } else {
        this.reload()
      }
    },
    // 添加功能
    add1 (id) {
      const _this = this
      _this.num = this.Menu.pop()
      if (_this.num !== null) {
        if (_this.num !== undefined) {
          axios.post('http://localhost:8088/saveRoleAndMenu/' + id + '/' + _this.num).then(function (resp) {
            _this.add1(id)
          })
        }
      } else {
        this.add1(id)
      }
    },
    add (addAction) {
      const _this = this
      this.$refs[addAction].validate((valid) => {
        if (valid) {
          axios.get('http://localhost:8088/findByRoleid/' + _this.roleform.roleid).then(function (resp) {
            _this.role2 = resp.data
            if (_this.role2 === '') {
              _this.add1(_this.roleform.roleid)
              axios.post('http://localhost:8088/saveRole', _this.roleform).then(function (resp) {
                _this.$message({
                  message: '添加成功！',
                  type: 'success'
                })
                _this.reload()
              })
            } else {
              alert('编号已经存在请重新输入')
            }
          })
        }
      })
    },
    add2 (addform) {
      const _this = this
      this.$refs[addform].validate((valid) => {
        if (valid) {
          _this.add1(_this.roleform.roleid)
          axios.post('http://localhost:8088/saveRole', _this.roleform).then(function (resp) {
            _this.$message({
              message: '操作成功',
              type: 'success'
            })
            _this.reload()
          })
        }
      })
    },
    // 修改
    edit (row) {
      const _this = this
      this.roleform = row
      axios.post('http://localhost:8088/findByUseridM/' + row.roleid).then(function (resp) {
        _this.Menu = resp.data
      })
      this.openedit = true
    },
    editaction (openedit) {
      this.deleteout()
      this.add2(openedit)
    },
    // 删除
    opendelete (row) {
      this.openelete = true
      this.roleform = row
    },
    deleted () {
      axios.post('http://localhost:8088/deleteRole/' + this.roleform.id).then(function (resp) {
      })
      this.deleteout()
      this.reload()
    },
    deleteout () {
      axios.post('http://localhost:8088/deleteRoleM/' + this.roleform.roleid).then(function (resp) {
      })
    },
    // 分页模块
    page (currentpage) {
      const _this = this
      axios.get('http://localhost:8088/findRoleAll/' + currentpage + '/5').then(function (resp) {
        _this.tableData = resp.data.content
        _this.total = resp.data.totalElements
      })
    }
    // 权限菜单
  },
  // 接受后台数据
  created () {
    const _this = this
    axios.get('http://localhost:8088/findRoleAll/1/5').then(function (resp) {
      _this.tableData = resp.data.content
      _this.total = resp.data.totalElements
    })
    axios.get('http://localhost:8088/findMenuAllR').then(function (resp) {
      _this.menu = resp.data
    })
  },
  //  数据绑定
  data () {
    return {
      total: null,
      input: {
        input3: ''
      },
      num: '',
      role2: null,
      tableData: null,
      formLabelWidth: '100px',
      openadd: false,
      openedit: false,
      roleform: {
        id: '',
        roleid: '',
        rolename: ''
      },
      rules: {
        roleid: [
          { required: true, message: '请输入角色编号', trigger: 'blur' }
        ],
        rolename: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ]
      },
      menu: null,
      Menu: [],
      openelete: false
    }
  }
}
</script>
